<template>
    <div class="scb">
        {{led.tplDatas.tplCode}}
        <div class="scbTpl" v-if = "led.tplDatas.tplCode=='welcome'">
            <div class="tplWelcome">welcome</div>
        </div>
        <div class="scbTpl" v-if = "led.tplDatas.tplCode=='schedule'">
            <div class="tplSchedule">
                <div class="title">schedule : {{led.tplDatas.items.schedule.dispItems.length}}</div>
                <ul class="lstItems">
                    <li v-for="(item,ind) in led.tplDatas.items.schedule.dispItems" :key="ind">
                        <div class="itemRow">
                            <div class="col">{{item.DisciplineName}}</div>
                            <div class="col">{{item.EventName}}</div>
                            <div class="col">{{item.Date}}</div>
                            <div class="col">{{item.StartTime}}</div>
                            <div class="col">{{item.MatchName}}</div>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
        <div class="scbTpl" v-if = "led.tplDatas.tplCode=='startList'">
            <div class="tplSchedule">
                <div class="title">startList : {{led.tplDatas.items.startList.dispItems.length}}</div>
                <ul class="lstItems">
                    <li v-for="(item,ind) in led.tplDatas.items.startList.dispItems" :key="ind">
                        <div class="itemRow">
                            <div class="col">{{item.Order}}</div>
                            <div class="col">{{item.AthleteName}}</div>
                            <div class="col">{{item.CountryName}}</div>
                            <div class="col">{{item.HorseName}}</div>
                            <div class="col">{{item.StartTime}}</div>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</template>

<script>
    import { api , TWsClient} from '@/assets/api';
    import { TTsJumpCore  , TTsJumpLed} from './jumpTsUtils'; 
    var wsClient = new TWsClient();    
    export default {
        mounted(){
            var me = this;
            try {
                me.$nextTick().then(_=>{
                    return me.init();
                }).then(_=>{
                    me.refresh();
                })
            } catch (error) {
                console.log(error)
            }
        },
        data(){
            return{
                pageStateKey:"jumpTs.led.stateKey" ,
                pageState:{ 
                },
                led: new TTsJumpLed(api)
            }
        },
        methods:{
            init(){
                var me = this;
                return new Promise((su,fa)=>{
                    try {
                        me.pageState = api.getSessionObj(me.pageStateKey , me.pageState);                         
                        me.initWsClient();
                        su();
                    } catch (error) {
                        console.log(error);
                        su();
                    }
                })
            },
            getWsUrl(){
                var me = this;
                var res = "";
                return new Promise((su,fa)=>{
                    try {
                        api.callApi("jumpTs2025_obj", "getObj", { objKey: "tsEquSettings" }).then(re => {
                            try {
                                if (re.status == 1) {
                                    res = re.result;
                                }
                            } catch (err) {
                                console.log(err)
                            }
                            su(res);
                        })
                    } catch (error) {
                        console.log(error);
                        su();
                    }
                })
            },
            initWsClient(){
                var me = this;
                try { 
                    if( wsClient!=null){
                        wsClient.forceCloseFlag = true;
                        wsClient.disconnect(); 
                        wsClient = null;
                    } 
                    wsClient = new TWsClient();
                    me.getWsUrl().then(_url=>{
                        var wsUrl =  _url.wsUrl;
                        //wsUrl="ws://192.168.1.20:20258/wsinfoapi"
                        console.log(wsUrl); 
                        wsClient.init(
                            wsUrl ,
                            "jumpTs2025",
                            ["regist", "sessionChanged", "led"],
                            me.onConnectedChanged ,
                            me.onSessionChanged ,
                            me.onMsg, 
                            { clientType:'障碍赛LED' }
                        );
                        wsClient.connect()

                    })
                } catch (error) {
                    console.log(error) 
                }
            },
            onConnectedChanged(sender , data){
                var me = this;
                try {  
                    console.log('onConnectedChanged' ,data , wsClient.settings.wsUrl)
                    if( data){
                        wsClient.sendMsg("regist" , {srcId: wsClient.peerId })
                    }
                } catch (error) {
                    console.log(error)
                }
            },
            onSessionChanged(sender , data){
                var me = this;
                try {  
                    me.sessions = data;
                    console.log('onSessionChanged' ,data) 
                } catch (error) {
                    console.log(error)
                }
            },
            onMsg(sender , msg){
                var me = this;
                try { 
                    console.log('rec msg' , msg)
                    me.led.setTplData(msg).then(_=>{
                        console.log( me.led.tplDatas)
                    })
                } catch (error) {
                    console.log(error)
                }
            },
            refresh(){
                var me = this;
                try { 
                    
                } catch (error) {
                    console.log(error)
                }
            },

        }
    }
</script>

<style lang="less" scoped>
    .scb{
        background-color: #262728;
        color: #fafafa;

        .scbTpl{
            .tplSchedule{
                ul.lstItems{
                    li{
                        .itemRow{
                            display: flex;
                            align-items: center;
                            justify-content: space-between;
                        }
                    }
                }
            }
        }

    }
</style>